<template>
    <div>
        <block-title
            :title="title"
            :titleEng="titleEng"
            :type="type"
        ></block-title>
        <slot name='block-content'>
            <div class="box_m" v-if="type==0">
                <ul class="solution i_solution clearfix">
                    <li v-for="(item, index) in list" :key="index">
                        <block-title-remark 
                            :title="item.title"
                            :desc = "item.desc"
                            :img="item.img"
                        ></block-title-remark>
                    </li>
                </ul>
            </div>

            <div class="pro_m" v-if="type==1">
                <div class="slider">
                    <div class="flexslider">
                        <ul class="slides">
                            <li>
                                <ul class="pro_l clearfix">
                                    <li v-for="(item, index) in list" :key="index">
                                        <block-title-p 
                                            :title="item.title"
                                            :desc = "item.desc"
                                            :img="item.img"
                                        ></block-title-p>
                                    </li>
                                    
                                </ul>
                            </li>
                           
                        </ul>
                    </div>
                </div>
            </div>

            <div class="box_m" v-if="type==2">
                <ul class="solution service clearfix">
                    <li v-for="(item, index) in list" :key="index">
                        <block-title-icon 
                            :title="item.title"
                            :desc = "item.desc"
                            :img="item.img"
                        ></block-title-icon>
                    </li>
                </ul>
            </div>
        </slot>
    </div>
</template>
<script>
import BlockTitle from './block-title/block-title'
import BlockTitleRemark from './block-contents/block-title-remark'
import BlockTitleP from './block-contents/block-title-p'
import BlockTitleIcon from './block-contents/block-title-icon'
export default {
    components: {
        BlockTitle,
        BlockTitleRemark,
        BlockTitleP,
        BlockTitleIcon
    },
    props: {
        title: {
            type: String ,
            default: function() {
                return ""
            }
        },
        titleEng: {
            type: String ,
            default: function() {
                return ""
            }
        },
        list: {
            type:Array,
            default: function() {
                return []
            }
        },
        type: {
            type:Number,
            default: function() {
                return 0
            }
        }

    }
    
}
</script>
<style lang="stylus" scoped>

.box_m
    margin-top:0px;
    .solution
        width:100%; max-width:1200px; margin:0px auto;
        li 
            width:280px; height:372px; background:#F0F0F0; border-bottom:3px solid #004588; float:left; margin-right:20px;margin-bottom:20px; position:relative; overflow:hidden;
    .service
        width:100%;
        li 
            background:none; height:280px; border:0px; position:relative;z-index :5; margin-bottom: 0px;

        
.pro_m
    width:100%; max-width:1200px; margin:0px auto;
    .pro_l
        width:100%; padding:0 0 70px;
        li
            width:275px; float:left; margin-right:24px; text-align:center;

</style>